<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet"  >
</head>
<body>

<div id="app">
    {{query}}
    <form class="row row-cols-lg-auto g-3 align-items-center">

        <div class="col-12">
            <div class="input-group">
                <div class="input-group-text">工号</div>
                <input type="text" class="form-control" v-model="query.e_id"  >
            </div>
        </div>

        <div class="col-12">
            <div class="input-group">
                <div class="input-group-text">姓名</div>
                <input type="text" class="form-control" v-model="query.e_name"  >
            </div>
        </div>

        <div class="col-12">
            <button @click="getEmpList" type="button" class="btn btn-primary">搜索</button>
        </div>
    </form>


    <table class="table">
        <thead>
            <tr>
                <th>工号</th><th>姓名</th><th>月薪</th><th>入职日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="emp in empList" >
               <td>{{emp.e_id}}</td>
                <td>{{emp.e_name}}</td>
                <td>{{emp.e_sal}}</td>
                <td>{{emp.e_date}}</td>
            </tr>
        </tbody>
    </table>

</div>

<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
    //配置
    const cfg = {
        //setup函数是vue渲染视图的初始化函数
        setup(){

            const info = Vue.ref("大家好");//创建了一个响应式数据info
            const empList = Vue.ref([]);

            //创建了一个响应式数据query
            const query = Vue.reactive({
                e_id:'',
                e_name:''
            });

            const getEmpList = ()=>{
                //then函数的参数是一个函数，这个参数函数负责处理响应结果
                axios.get('emps',{params:query}).then((response)=>{
                    //response即服务端响应，该对象的data属性就是服务端回传的数据
                    empList.value = response.data;

                });
            };

            getEmpList();

            return {
                info,
                getEmpList,
                empList,
                query
            };
        }

    };

    Vue.createApp(cfg).mount('#app');

</script>



</body>
</html>